<template>
  <div class="checkPlan_box">
    <div class="checkPlan_top">
      <div class="checkPlan_title">车间设备实时统计</div>
    </div>

    <div class="echarts_container">
      <div id="map1" class="col-md-12  col-sm-12 col-xs-12" style="height: 100%;flex:5" />
      <div class="info">
        <div class="info_item">今日理论工作总时长:123h</div>
        <div class="info_item">今日实际工作总时长:123h</div>
        <div class="info_item">今日理论工作总时长:123h</div>
        <div class="info_item">今日最长待机时长:123h</div>
      </div>
    </div>
    <!-- <div v-else class="echarts_noData">
      <svg-icon icon-class="暂无数据" />
    </div> -->
  </div>
</template>

<script>
import { deviceMaintainPlanTimelinessRate } from '@/api/equipmentManage/equipmentReport/dataBoard'

export default {
  data() {
    return {
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawLine()
    })
    // this.getList()
    // this.getValue()
  },
  created() {
    this.$nextTick(() => {
      this.drawLine()
    })
  },
  methods: {
    drawLine() {
      const myChart = this.$echarts.init(document.getElementById('map1'))
      var data = [
        {
          name: '当日时间开动率',
          value: '60'
        },
        {
          name: '当日设备开机率',
          value: 25
        },
        {
          name: '当日设备待机率',
          value: 15
        }
      ]

      var titleArr = []
      var seriesArr = []
      const colors = [
        ['#82FF79', '#D8D8D8'],
        ['#FF9292', '#D8D8D8'],
        ['#FFE974', '#D8D8D8']
      ]
      data.forEach(function(item, index) {
        titleArr.push({
          text: item.name,
          left: index * 30 + 15 + '%',
          top: '80%',
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: '16',
            color: '#666666',
            textAlign: 'center'
          }
        })
        seriesArr.push({
          name: item.name,
          type: 'pie',
          clockWise: false,
          radius: [60, 70],
          itemStyle: {
            normal: {
              color: colors[index][0],
              //   shadowColor: colors[index][0],
              //   shadowBlur: 20,
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          center: [index * 30 + 15 + '%', '50%'],
          data: [
            {
              value: item.value,
              label: {
                normal: {
                  formatter: function(params) {
                    return params.value + '%'
                  },
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    color: '#333333'
                  }
                }
              }
            },
            {
              value: 100 - item.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: colors[index][1]
                },
                emphasis: {
                  color: colors[index][1]
                }
              }
            }
          ]
        })
      })
      myChart.setOption({
        backgroundColor: '#fff',
        title: titleArr,
        series: seriesArr
      })
    }
  }
}
</script>

<style lang="less" scoped>
.checkPlan_box{
  width: 100%;
  height: calc(100% - 50px);
}
.checkPlan_top {
  display: flex;
  justify-content: space-between;

  .checkPlan_title {
    font-size: 24px;
    font-weight: bold;
    line-height: 34px;
    letter-spacing: -0.21px;
    color: #333333;
    padding-top: 16px;
    padding-left: 20px;
  }

  .checkPlan_month{
    padding-top: 16px;
    padding-right: 20px;
  }
}
.echarts_container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding:0 10px;
    .info{
        flex: 2;
        margin-top: 25px;
        .info_item{
            padding:10px 10px 10px 0;
        }
    }
}
</style>
